<template>
  <basic-container>
    <!-- 头部搜索栏 -->
    <div class="search-wrap">
      <div class="merchant" style="display: inline-block">
        选择供应商：
        <el-select
          filterable
          remote
          :remote-method="remoteMerchant"
          v-model="merchantId"
          @change="changeMerchant"
          placeholder="请选择">
          <el-option
            v-for="(item,index) in merchantList"
            :key="index"
            :label="item.merchantName"
            @change="changeMerchant"
            :value="item.merchantId"/>
        </el-select>
      </div>
      <div class="shop" style="display: inline-block;margin-left: 20px;">
        选择店铺：
        <el-select
          filterable
          remote
          :remote-method="remoteShop"
          v-model="shopId"
          @change="changeShop"
          placeholder="请选择">
          <el-option
            v-for="(item,index) in shopList"
            :key="index"
            :label="item.name"
            :value="item.shopId"/>
        </el-select>
      </div>
    </div>
    <!-- 表格展示部分   -->
    <avue-crud :data="goodsCategories"
               :option="tableOption"
               @refresh-change="refreshTable"
               @search-change="searchChange"
    >
      <!-- 新增分类    -->
      <template slot-scope="scope" slot="menuLeft">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click.stop="addGoodsCate"
        >新增分类
        </el-button>
      </template>
      <!-- 分类图标 -->
      <template slot="logo" slot-scope="scope">
        <img :src="scope.row.logo" class="category-logo" v-if="scope.row.logo"/>
      </template>

      <!-- 批量上下架 -->
      <template slot="batch" slot-scope="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="'1'"
          :inactive-value="'0'"
          @change="modifyStatus(scope.row.status , scope.row.id)"
        ></el-switch>
      </template>

      <!-- 是否显示 -->
      <template slot="show" slot-scope="scope">
        <el-switch
          v-model="scope.row.categoryType"
          :active-value="'1'"
          :inactive-value="'0'"
          @change="changeShow(scope.row.categoryType , scope.row.id)"
        ></el-switch>
      </template>

      <!-- 新增子分类 -->
      <template slot="children" slot-scope="scope">
        <el-button type="text" v-if="scope.row.parentId == 0" @click.stop="addSubGoodsCate(scope.row)">新增</el-button>
      </template>

      <!-- 操作功能 -->
      <template slot-scope="scope" slot="menu">
        <el-button
          type="primary"
          icon="el-icon-check"
          size="small"
          @click.stop="editGoodsCate(scope.row)"
        >修改
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-check"
          size="small"
          @click.stop="delGoodsCate(scope.row)"
        >删除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>

  import {getmerchantList} from "../../../api/supply/supplier";
  import {fetchList} from "../../../api/manage/shop";
  import {getCategoryTree, deleteCategory} from "../../../api/goods/goodscategory";
  import {tableOption} from "../../../const/crud/supply/goods_category"
  import {changeCategoryStatus, offGoodsByCate} from "../../../api/goods/category";

  export default {
    name: "index",
    data() {
      return {
        goodsName: '',
        merchantList: [],
        shopList: [],
        merchantId: '',
        shopId: '',
        goodsCategories: [],
        tableOption: tableOption,
        fly: 1
      }
    },
    created() {
      this.getMerchantList({status: 2})
    },
    methods: {
      //获取供应商列表
      getMerchantList(param = {}) {
        getmerchantList(param).then(res => {
          this.merchantList = res.data.data.records
          this.merchantId = res.data.data.records[0].merchantId
          this.getShopList()
        })
      },
      remoteMerchant(name = null) {
        let query = {
          merchantName: name,
          status: 2
        };
        getmerchantList(query).then(res => {
          this.merchantList = res.data.data.records;
        });
      },
      //改变merchantId
      changeMerchant() {
        let params = {
          status: 2,
          merchantId: this.merchantId,
          name: name
        }
        fetchList(params).then(res => {
          this.shopList = res.data.data.records
          if (res.data.data.records.length == 0) {
            this.$message.warning("没有店铺")
          }
          this.shopId = this.shopList[0].shopId
          this.getGoodsCategoryList()
        })
      },
      //获取店铺列表
      getShopList() {
        let params = {}
        params.status = 2
        params.merchantId = this.merchantId
        fetchList(params).then(res => {
          this.shopList = res.data.data.records
          this.shopId = res.data.data.records[0].shopId
          this.getGoodsCategoryList()
        })
      },
      remoteShop(name = null) {
        let params = {
          status: 2,
          merchantId: this.merchantId,
          name: name
        }
        fetchList(params).then(res => {
          this.shopList = res.data.data.records
        })
      },
      //改变shopID
      changeShop() {
        this.getGoodsCategoryList()
      },
      // 获取商品分类列表
      getGoodsCategoryList(param = {}) {
        getCategoryTree({shopId: this.shopId,allShow: true}).then(res => {
          this.goodsCategories = res.data.data
        })
      },
      //上下架
      modifyStatus(value, id) {
        if (this.fly != 1) {
          this.$message.error("请勿重复点击");
          return false;
        }
        this.fly = 0;
        let flag = true;
        console.log(value);
        if (value == 1) {
          flag = true;
        }
        if (value == 0) {
          flag = false;
        }
        offGoodsByCate({id: id, flag: flag}).then(res => {
          if (res.data.code == 0) {
            var _this = this;
            this.$message.success("设置成功");
            setTimeout(function () {
              _this.fly = 1;
            }, 1000);
          } else {
            this.$message.error("设置失败");
            var _this = this;
            setTimeout(function () {
              _this.fly = 1;
            }, 1000);
          }
          this.loading = true;
        });
      },
      //是否显示
      changeShow(value, id) {
        console.log(value);
        if (this.fly != 1) {
          this.$message.error("请勿重复点击");
          return false;
        }
        this.fly = 0;
        changeCategoryStatus({
          id: id,
          categoryType: value
        }).then(res => {
          if (res.data.code == 0) {
            this.$message.success("设置成功");
            var _this = this;
            setTimeout(function () {
              _this.fly = 1;
            }, 1000);
          } else {
            this.$message.error("设置失败");
            var _this = this;
            setTimeout(function () {
              _this.fly = 1;
            }, 1000);
          }
        });
      },
      //新增子分类
      addSubGoodsCate(row) {
        const query = {
          res: {
            shopId: row.shopId,
            parentId: row.id
          }
        }
        this.$router.push({path: 'addCategory', query: query})
      },
      //  新增父分类
      addGoodsCate() {
        const query = {
          res: {
            shopId: this.shopId
          }
        }
        this.$router.push({path: 'addCategory', query: query})
      },
      //  编辑分类
      editGoodsCate(row) {
        const query = {
          res: {
            categoryId: row.id,
            shopId: this.shopId
          }
        }
        this.$router.push({path: 'editCategory', query: query})
      },
      //  删除分类
      delGoodsCate(row) {
        deleteCategory(row.id).then(res => {
          this.$message.success("删除成功")
          this.getGoodsCategoryList()
        })
      },
      //  刷新表格
      refreshTable() {
        this.getGoodsCategoryList()
      },
      //  搜索
      searchChange(params, done) {
        console.log(params);
        done();
      }
    }
  }
</script>

<style scoped>
  .search-wrap {
    margin-bottom: 20px;
  }

  .category-logo {
    width: 60px;
    height: 60px;
    border-radius: 6px;
  }
</style>
